<template>
  <div class="row" v-for="(item, index) in props.helpList" :key="index">
    <div class="label">
      <span> {{ item.name }}</span>
      <el-button v-if="item.value" type="primary" size="small" :link="true" v-copy="item.value" class="ml5 mr5"> 复制 </el-button>
      <SvgIcon
        v-if="item.children"
        :name="item.isOpen ? 'el-ArrowDown' : 'el-ArrowRight'"
        @click="item.isOpen = !item.isOpen"
      ></SvgIcon>
    </div>
    <div class="content">
      <div class="ml10">{{ item.value }}</div>
      <div class="ml10 remark">{{ item.remark }}</div>
    </div>
    <helpChildren v-if="item.children && item.isOpen" :help-list="item.children"></helpChildren>
  </div>
</template>
<script setup lang="ts" name="HelpChildren">
export interface HelpListValueProps {
  name: string;
  value: string;
  isOpen?: boolean | any;
  remark?: string | any;
  children?: HelpListValueProps[] | any;
}

export interface HelpListProps {
  helpList: HelpListValueProps[];
}

const props = withDefaults(defineProps<HelpListProps>(), {
  helpList: () => []
});
</script>
<style lang="scss" scoped src="./index.scss"></style>
